<template>
  <div
    :class="['herin-container','animate__animated',`animate__delay-${delay}s`, isLeave ? `animate__fadeOut${direction}` : `animate__fadeIn${direction}`]"
    :style="{'width': boxWidth + 'px', 'marginTop':marginTop + 'px'}"
  >
    <div :class="['herin-container-header','animate__animated',`animate__delay-${delay + 1}s`,isLeave ? `animate__fadeOut${direction}` : `animate__fadeIn${direction}`]">
      <div class="herin-container-header-title">{{ title }}</div>
      <slot name="tab" />
    </div>
    <div :class="['herin-container-content animate__animated',`animate__delay-${delay + 2}s`,isLeave ? `animate__fadeOut${direction}` : `animate__fadeIn${direction}`]">
      <slot name="content" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'HerinContainer',
  props: {
    title: {
      type: String,
      default: '',
      required: true
    },
    delay: {
      type: Number,
      required: true
    },
    isLeave: {
      type: Boolean,
      default: false
    },
    marTopnum: {
      type: Number,
      required: false
    },
    width: {
      type: Number,
      default: (val = 360) => {
        return val;
      }
    },
    direction: {
      type: String,
      default: 'Left',
      validator(val) {
        return ['Right', 'Left', 'Down', 'Up'].includes(val);
      }
    }
  },
  data() {
    return {};
  },
  computed: {
    marginTop() {
      const ratio = window.ratio || 1;
      return this.marTopnum * ratio;
    },
    boxWidth() {
      const ratio = window.ratio || 1;
      return this.width * ratio;
    }
  }
};
</script>
<style lang="scss" scoped>
.herin-container{
  // box-sizing: border-box;
  // padding: 0 0.625rem 0.625rem 0;
  height: auto;

  background-color: rgba(0, 0, 0, 0.1);
  background-color: rgba(4, 23, 47, 0.95);

  margin-bottom: 0.625rem;
  &-header{
    // font-size: 1rem;
    z-index: 1;
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 0.9375rem 0 0;
    height: 1.875rem;
    // height: 1.875rem;
    line-height: 1rem;

    background-color: rgba(0, 0, 0, 0.4);
    background-image: url(@/assets/img/header/all-title.png);
    background-size: 100% 100%;

    // background-image: linear-gradient(to right,  rgba(0, 253, 255, 0.4), rgba(4, 23, 47, 0.95));

    // background-image: url(../assets/img/common/blackTitle.png);
    &-title{
      position: relative;
      padding-left: .9375rem;
      // font-size: 1.125rem;
      // line-height: 1rem;
      line-height: 1.125rem;
      font-size: 1.125rem;
      color: #fff;
      font-weight: bold;

      // &::before{
      //   position: absolute;
      //   top: 0;
      //   left: .9375rem;
      //   // transform: translateY(50%);

      //   width: 0.1875rem;
      //   height: 1.125rem;
      //   line-height: 1.125rem;
      //   // margin-top: -0.4375rem;
      //   content: '';

      //   background-color:#00FDFF;
      // }
    }
  }

  &-content{
    padding: 0.9375rem;
    box-sizing: border-box;
    background-color: #04162F;
    // background-color: rgba(4, 23, 47, 0.95);
  }
}
.herin-container:last-child{
  margin-bottom: 0;
}
</style>

